<template>
	<div class="container">
		<div class="box">
			<div class="theader">
				<div class="theader_item">
					<div class="span span3">序号</div>
				</div>
				<div class="theader_item">
					<div class="span span3">车型</div>
				</div>
				<div class="theader_item">
					<div class="span span3">台数</div>
				</div>
				<div class="t">
					<div class="label1">合同信息</div>
					<div class="content">
						<div class="content_item">
							<div class="content_label1 span">
								每月租金(含税)
							</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.monthlyRentTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">保证金</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">违章待查金</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">首期租金</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.firstInstallmentRentTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">残值/处置金额</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.residualValueTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">期数/月</div>
							<div class="content_label2 span"></div>
						</div>
					</div>
				</div>
				<div class="t">
					<div class="label1">运营相关</div>
					<div class="content">
						<div class="content_item">
							<div class="content_label1 span">新车采购价</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.salePriceTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">购置税</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">交强+商业合计</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.insuranceTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<!-- <div class="content_item"> -->
						<!-- <div class="content_label1 span"></div> -->
						<!-- <div class="content_label2 span">13%</div> -->
						<!-- </div> -->
						<div class="content_item">
							<div class="content_label1 span">车船税合计</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">上牌费</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">年检费</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">装饰费</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.decorationTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">GPS</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.gpsTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">
								保养费 (含胎费)
							</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.maintenanceTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<!-- <div class="content_item"> -->
						<!-- <div class="content_label1 span">轮胎费</div> -->
						<!-- <div class="content_label2 span">13%</div> -->
						<!-- </div> -->
						<div class="content_item">
							<div class="content_label1 span">延保费</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">替车费</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">物流费</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.logisticsTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">其他运营费用</div>
							<div class="content_label2 span"></div>
						</div>
					</div>
				</div>
				<div class="theader_item">
					<div class="span span2">佣金</div>
					<div class="span span1">
						{{
							taxRateConfig.commissionTaxRate
								| radio100(numberRide)
						}}%
					</div>
				</div>
				<div class="t">
					<div class="label1">融资相关</div>
					<div class="content">
						<div class="content_item">
							<div class="content_label1 span">金融贷款金额</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">
								金融贷款总利息
							</div>
							<div class="content_label2 span"></div>
						</div>
					</div>
				</div>
				<div class="t">
					<div class="label1">进项税</div>
					<div class="content">
						<div class="content_item">
							<div class="content_label1 span">购车款</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.inputCarTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">保险</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.inputTaxOnInsuranceRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">佣金</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.inputTaxOnCommissionRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">运营相关费用</div>
							<div class="content_label2 span"></div>
						</div>
					</div>
				</div>
				<div class="t">
					<div class="label1">销项税</div>
					<div class="content">
						<div class="content_item">
							<div class="content_label1 span">租金收入</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.rentTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">其他收入</div>
							<div class="content_label2 span"></div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">保险返佣</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.outputTaxOnInsuranceCommissionRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">卖车款</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.outputCarTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
					</div>
				</div>
				<div class="theader_item">
					<div class="span span2">增值税附加</div>
					<div class="span span1">
						{{ taxRateConfig.surtaxRax | radio100(numberRide) }}%
					</div>
				</div>
				<div class="t">
					<div class="label1">印花税</div>
					<div class="content">
						<div class="content_item">
							<div class="content_label1 span">租赁合同</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.leaseStampTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">车辆采购合同</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.purchaseStampStampTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">车辆处置合同</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.disposalStampTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">保险险合同</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.insuranceStampTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">
								运营维保等合同
							</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.maintenanceStampTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">运输合同</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.transportationStampTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">贷款合同</div>
							<div class="content_label2 span">
								{{
									taxRateConfig.loanStampTaxRate
										| radio100(numberRide)
								}}%
							</div>
						</div>
						<div class="content_item">
							<div class="span span2">合计</div>
						</div>
					</div>
				</div>
				<div class="t">
					<div class="label1">固定资产信息</div>
					<div class="content">
						<div class="content_item">
							<div class="content_label1 span">初始信息</div>
							<div class="content_label2 span">本币原值</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span"></div>
							<div class="content_label2 span">使用月限</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span"></div>
							<div class="content_label2 span">月折旧额</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span"></div>
							<div class="content_label2 span">预留残值</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span">处置时点信息</div>
							<div class="content_label2 span">已折旧月限</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span"></div>
							<div class="content_label2 span">累计折旧</div>
						</div>
						<div class="content_item">
							<div class="content_label1 span"></div>
							<div class="content_label2 span">净值</div>
						</div>
					</div>
				</div>
				<div class="t">
					<div class="label1">租赁收入</div>
					<div class="content">
						<div class="content_item">
							<div class="span span2">租金收入</div>
						</div>
						<div class="content_item">
							<div class="span span2">其他收入</div>
						</div>
						<div class="content_item">
							<div class="span span2">租赁收入小计</div>
						</div>
					</div>
				</div>
				<div class="t">
					<div class="label1">租赁成本</div>
					<div class="content">
						<div class="content_item">
							<div class="span span2">车辆折旧</div>
						</div>
						<div class="content_item">
							<div class="span span2">车辆保险摊销</div>
						</div>
						<div class="content_item">
							<div class="span span2">车辆运营费小计</div>
						</div>
						<div class="content_item">
							<div class="span span2">税金及附加</div>
						</div>
						<div class="content_item">
							<div class="span span2">租赁成本小计</div>
						</div>
					</div>
				</div>
				<div class="theader_item">
					<div class="span span3">租赁利润</div>
				</div>
				<div class="t">
					<div class="label1">残值处理</div>
					<div class="content">
						<div class="content_item">
							<div class="span span2">处置收入</div>
						</div>
						<div class="content_item">
							<div class="span span2">处置成本</div>
						</div>
					</div>
				</div>
				<div class="theader_item">
					<div class="span span3">处置利润</div>
				</div>
				<div class="theader_item">
					<div class="span span3">息税前利润</div>
				</div>
				<div class="t">
					<div class="label1">资金成本</div>
					<div class="content">
						<div class="content_item">
							<div class="span span2">利息支出</div>
						</div>
					</div>
				</div>
				<div class="theader_item">
					<div class="span span3">税前利润</div>
				</div>
				<div class="theader_item">
					<div class="span span3">企业所得税</div>
				</div>
				<div class="theader_item">
					<div class="span span3">净利润</div>
				</div>
			</div>
			<div v-for="e in infoData.productList" class="chunk">
				<div v-for="item in formlist" class="span">
					<div>
						<TooltipDiv
							:content="
								'format' in item
									? item.format(
											e.calcSnapshoot
												.financialProfitCalcResult ||
												{},
											e || {},
									  )
									: ''
							"></TooltipDiv>
					</div>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
	import TooltipDiv from '@/views/quota/forecast/chunk/tooltipDiv';
	export default {
		components: { TooltipDiv },
		props: {
			value: {
				required: false,
			},
			state: {
				required: false,
			},
			type: {
				required: false,
			},
		},
		data() {
			return { a: '' };
		},
		computed: {
			infoData() {
				let data = this._.cloneDeep(this.value);
				data?.productList?.forEach(product => {
					try {
						if (
							this.notEmpty(product?.calcSnapshoot) &&
							typeof product?.calcSnapshoot == 'string'
						) {
							product.calcSnapshoot = JSON.parse(
								product.calcSnapshoot,
							);
						}
					} catch (error) {
						console.warn(error);
					}
				});
				return data;
			},
			taxRateConfig() {
				return (
					this.infoData?.productList?.[0]?.calcSnapshoot
						?.financialProfitCalcResult?.taxRateConfig ?? {}
				);
			},
			formlist() {
				return [
					{
						label: '序号',
						format: (e, row) => {
							return row?.calcSnapshoot?.sequenceNumber;
						},
					},
					{
						label: '车型',
						format: (e, row) => {
							return row?.plan?.carModelName;
						},
					},
					{
						label: '台数',
						format: e => {
							return e.count;
						},
					},
					{
						label: '每月租金(合税)',
						format: (e, row) => {
							return this.format(e.monthlyRent);
							// if (
							//   row?.plan?.planRent &&
							//   row?.plan?.planPaymentFrequencyType
							// ) {
							//   let price = this.numberExcept(
							//     row?.plan?.planRent,
							//     row?.plan?.planPaymentFrequencyType
							//   );
							//   return this.format(price);
							// }
							// return "-";
						},
					},
					{
						label: '保证金',
						format: (e, row) => {
							return this.format(e.deposit);
							// return this.format(row?.plan?.planContractCashdeposit);
						},
					},
					{
						label: '违章待查金',
						format: (e, row) => {
							return this.format(e.violationDeposit);
							// return this.format(row?.plan?.planViolationCashdeposit);
						},
					},
					{
						label: '首期租金',
						format: (e, row) => {
							// if (this.value?.rentType_raw == "1") return 0;
							return this.format(e.firstInstallmentRent);
							// return this.format(row?.plan?.planFirstRent);
						},
					},
					{
						label: '残值/处置金额',
						format: (e, row) => {
							// if (this.value?.rentType_raw == "1") return 0;
							// if (
							// 	this.value?.carType == '2' &&
							// 	this.value?.carSourceType == '1' &&
							// 	this.value?.rentType_raw == '1'
							// ) {
							// 	return this.format(
							// 		row?.plan?.finalEvaluationPrice,
							// 	);
							// }
							return this.format(e.residualValue);
							// return this.format(row?.plan?.planBalancepayment);
						},
					},
					{
						label: '期数/月',
						format: e => {
							return e.leaseTerm;
						},
					},
					{
						label: '新车采购价',
						format: e => {
							return this.format(e.purchasePrice);
						},
					},
					{
						label: '购置税',
						format: e => {
							return this.format(e.purchaseTax);
						},
					},
					{
						label: '交强+商业合计',
						format: e => {
							let price = this.numberAdd(
								e.compulsoryInsurance,
								e.commercialInsurance,
							);
							return this.format(price);
						},
					},
					{
						label: '车船税合计',
						format: e => {
							return this.format(e.vehicleTax);
						},
					},
					{
						label: '上牌费',
						format: e => {
							return this.format(e.carLicensePrice);
						},
					},
					{
						label: '年检费',
						format: (e, row) => {
							return this.format(e.inspectionFee);
						},
					},
					{
						label: '装饰费',
						format: e => {
							return this.format(e.decorationFee);
						},
					},
					{
						label: 'GPS',
						format: e => {
							return this.format(e.gpsFee);
						},
					},
					{
						label: '保养费 (含胎费)',
						format: e => {
							return this.format(e.upkeepFee);
						},
					},
					// {
					//     label: "轮胎费",
					//     format: (e) => {
					//         return this.format(e.tireFee);
					//     },
					// },
					{
						label: '延保费',
						format: e => {
							return this.format(e.deferredFee);
						},
					},
					{
						label: '替车费',
						format: e => {
							return this.format(e.alternativeCarFee);
						},
					},
					{
						label: '物流费',
						format: e => {
							return this.format(e.logisticsFee);
						},
					},
					{
						label: '其他运营费用',
						format: e => {
							return this.format(e.otherFee);
						},
					},
					{
						label: '佣金',
						format: e => {
							return this.format(e.commission);
						},
					},
					{
						label: '金融贷款金额',
						format: e => {
							return this.format(e.financialLoanAmount);
						},
					},
					{
						label: '金融贷款总利息',
						format: e => {
							return this.format(e.totalLoanInterest);
						},
					},
					{
						label: '购车款',
						format: e => {
							return this.format(e.inputTaxOnCarPurchase);
						},
					},
					{
						label: '保险',
						format: e => {
							return this.format(e.inputTaxOnInsurance);
						},
					},
					{
						label: '佣金',
						format: e => {
							return this.format(e.inputTaxOnCommission);
						},
					},
					{
						label: '运营相关费用',
						format: e => {
							return this.format(e.inputTaxOnOperatingExpenses);
						},
					},
					{
						label: '租金收入',
						format: e => {
							return this.format(e.outputTaxOnRentalIncome);
						},
					},
					{
						label: '其他收入',
						format: e => {
							return this.format(e.outputTaxOnOtherIncome);
						},
					},
					{
						label: '保险返佣',
						format: e => {
							return this.format(
								e.outputTaxOnInsuranceCommission,
							);
						},
					},
					{
						label: '卖车款',
						format: e => {
							return this.format(e.outputTaxOnVehicleSale);
						},
					},
					{
						label: '增值税附加',
						format: e => {
							return this.format(e.valueAddedTaxSurcharge);
						},
					},
					{
						label: '租赁合同',
						format: e => {
							return this.format(e.leaseContractStampDuty);
						},
					},
					{
						label: '车辆采购合同',
						format: e => {
							return this.format(
								e.vehiclePurchaseContractStampDuty,
							);
						},
					},
					{
						label: '车辆处置合同',
						format: e => {
							return this.format(
								e.vehicleDisposalContractStampDuty,
							);
						},
					},
					{
						label: '保险险合同',
						format: e => {
							return this.format(e.insuranceContractStampDuty);
						},
					},
					{
						label: '运营维保等合同',
						format: e => {
							return this.format(e.maintenanceContractStampDuty);
						},
					},
					{
						label: '运输合同',
						format: e => {
							return this.format(
								e.transportationContractStampDuty,
							);
						},
					},
					{
						label: '贷款合同',
						format: e => {
							return this.format(e.loanContractStampDuty);
						},
					},
					{
						label: '合计',
						format: e => {
							return this.format(e.totalStampDuty);
						},
					},
					{
						label: '本币原值',
						format: e => {
							return this.format(e.originalValueInLocalCurrency);
						},
					},
					{
						label: '使用月限',
						format: e => {
							return this.format(e.monthlyLimit);
						},
					},
					{
						label: '月折旧额',
						format: e => {
							return this.format(e.monthlyDepreciationAmount);
						},
					},
					{
						label: '预留残值',
						format: e => {
							return this.format(e.reservedResidualValue);
						},
					},
					{
						label: '已折旧月限',
						format: e => {
							return this.format(e.depreciatedMonths);
						},
					},
					{
						label: '累计折旧',
						format: e => {
							return this.format(e.accumulatedDepreciation);
						},
					},
					{
						label: '净值',
						format: e => {
							return this.format(e.netValue);
						},
					},
					{
						label: '租金收入',
						format: e => {
							return this.format(e.rentalIncome);
						},
					},
					{
						label: '其他收入',
						format: e => {
							return this.format(e.otherIncome);
						},
					},
					{
						label: '租赁收入小计',
						format: e => {
							return this.format(e.totalLeaseIncome);
						},
					},
					{
						label: '车辆折旧',
						format: e => {
							return this.format(e.vehicleDepreciation);
						},
					},
					{
						label: '车辆保险摊销',
						format: e => {
							return this.format(e.vehicleInsuranceAmortization);
						},
					},
					{
						label: '车辆运营费小计',
						format: e => {
							return this.format(
								e.vehicleOperatingExpensesSubtotal,
							);
						},
					},
					{
						label: '税金及附加',
						format: e => {
							return this.format(e.taxesAndSurcharges);
						},
					},
					{
						label: '租赁成本小计',
						format: e => {
							return this.format(e.leasingCostSubtotal);
						},
					},
					{
						label: '租赁利润',
						format: e => {
							return this.format(e.leasingProfit);
						},
					},
					{
						label: '处置收入',
						format: (e, row) => {
							return this.format(e.disposalIncome);
						},
					},
					{
						label: '处置成本',
						format: e => {
							return this.format(e.disposalCost);
						},
					},
					{
						label: '处置利润',
						format: e => {
							return this.format(e.disposalProfit);
						},
					},
					{
						label: '息税前利润',
						format: e => {
							return this.format(e.profitBeforeInterestAndTaxes);
						},
					},
					{
						label: '利息支出',
						format: e => {
							return this.format(e.interestExpense);
						},
					},
					{
						label: '税前利润',
						format: e => {
							return this.format(e.profitBeforeTax);
						},
					},
					{
						label: '企业所得税',
						format: e => {
							return this.format(e.corporateIncomeTax);
						},
					},
					{
						label: '净利润',
						format: e => {
							return this.format(e.netProfit);
						},
					},
				];
			},
		},
		created() {},
		mounted() {},
		filters: {
			radio100(val, raido) {
				let price = val * 1;
				if (isNaN(price)) return '-';
				let price100 = raido(price, 100);
				return isNaN(price100) ? '-' : price100;
			},
		},
		methods: {
			format(number) {
				let price = number * 1;
				if (isNaN(price)) return '-';
				let fixed2 = price.toFixed(2) * 1;
				return new Intl.NumberFormat('en-us').format(fixed2);
			},
		},
	};
</script>

<style lang="scss" scoped>
	.container {
		margin: 20px;
		padding: 20px;
		background-color: #fff;
		border-radius: 8px;
	}
	.test {
		width: 50px;
	}
	.box {
		width: 100%;
		display: flex;
		flex-wrap: nowrap;
		overflow-x: scroll;
		position: relative;
		--c1: 100px;
		--c2: 200px;
		--c3: 100px;
		--h: 40px;
		--chunkW: 200px;
		@for $i from 1 through 3 {
			.span#{$i} {
				width: 100%;
				grid-column-start: span #{$i};
			}
		}
		.span {
			width: 100%;
			height: var(--h);
			line-height: var(--h);
			border: 1px solid #dfe6ec;
			border-left: none;
			border-top: none;
			padding: 0 10px;
			box-sizing: border-box;
			text-align: center;
			white-space: nowrap;
			text-overflow: ellipsis;
			overflow: hidden;
			// display: flex;
			// justify-content: center;
			// align-items: center;
		}
		.chunk {
			flex: none;
			border-top: 1px solid #dfe6ec;
			width: var(--chunkW);
			color: #606266;
			font-size: 12px;
			min-width: 0;
		}
		.theader {
			position: sticky;
			z-index: 2;
			left: 0;
			border: 1px solid #dfe6ec;
			border-right: none;
			border-bottom: none;
			color: #515a6e;
			font-size: 14px;
			font-weight: 500;
			background-color: #fff;
			.theader_item {
				display: grid;
				align-self: center;
				justify-self: center;
				grid-template-columns: var(--c1) var(--c2) var(--c3);
			}
			.t {
				display: grid;
				align-self: center;
				justify-self: center;
				grid-template-columns: var(--c1) 1fr;
				.label1 {
					display: flex;
					justify-content: center;
					align-items: center;
					border: 1px solid #dfe6ec;
					border-left: none;
					border-top: none;
				}
				.content {
					.content_item {
						display: grid;
						align-self: center;
						justify-self: center;
						grid-template-columns: var(--c2) var(--c3);
					}
				}
			}
		}
	}
</style>
